const contentBox=document.querySelector(".cont")
contentBox.addEventListener('mouseover', e => {
    e = e || window.event
    const target = e.target || e.srcElement
    const show = document.querySelector('.cont .show')
    const mask = document.querySelector('.cont .mask')
    // const list = document.querySelector('.cont>.pic>.box>.list')
    const enlargebox = document.querySelector('.cont .enlarge')
    // const textBox = document.querySelector('.cont .text')
    console.log(123);
    //show 的宽高
    const show_w = show.offsetWidth
    const show_h = show.offsetHeight
    //mask 的 宽高
    const mask_w = parseInt(window.getComputedStyle(mask).width)
    const mask_h = parseInt(window.getComputedStyle(mask).height)
    //背景图 的 宽高
    const bg_w = parseInt(window.getComputedStyle(enlargebox).backgroundSize.split(' ')[0])
    const bg_h = parseInt(window.getComputedStyle(enlargebox).backgroundSize.split(' ')[1])
  
    // 调整比例
    //  enlarge 盒子尺寸 = 背景图尺寸 * mask 盒子尺寸 / show 盒子尺寸
    const en_height = bg_h * mask_h / show_h
    const en_width = bg_w * mask_w / show_w
  
    // 赋值
    enlargebox.style.width = en_width + 'px'
    enlargebox.style.height = en_height + 'px'
    // 移入移出
    show.addEventListener('mouseover', () => {
      mask.style.display = 'block'
      enlargebox.style.display = 'block'
    })
  
    show.addEventListener('mouseout', () => {
      mask.style.display = 'none'
      enlargebox.style.display = 'none'
    })
  
    // 列表切换
    // list.addEventListener('click', e => {
    //   e = e || window.event
    //   if (target.nodeName === 'IMG') {
    //     const show_url = target.dataset.show
    //     const enlarge = target.dataset.enlarge
    //     // console.log(show_url);
    //     console.log(enlarge);
    //     show.firstElementChild.src = show_url
    //     enlargebox.style.backgroundImage = `url(${enlarge})`
    //     for (let i = 0; i < list.children.length; i++) {
    //       list.children[i].classList.remove('active')
    //     }
    //     target.parentElement.classList.add('active')
    //   }
    // })
  
    // 跟随移动
  
    show.addEventListener('mousemove', e => {
      e = e || window.event
      const target = e.target || e.srcElement
      let x = e.offsetX - mask_w / 2
      let y = e.offsetY - mask_h / 2
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= show_w - mask_w) x = show_w - mask_w
      if (y >= show_h - mask_h) y = show_h - mask_h
      mask.style.left = x + 'px'
      mask.style.top = y + 'px'
      const bx = x * en_width / mask_w
      const by = y * en_height / mask_h
      enlargebox.style.backgroundPosition = `-${bx}px  -${by}px`
    })
    // const spanBox = document.querySelector('.content>.empty>.item2>.w360>#remaining_number>span')
    // const input = document.querySelector('.content>.empty>.item2>.w360>.countbox>.input')
    // const ip = spanBox.innerText 
    // textBox.addEventListener('click', e => {
    //   console.log(12345);
    //   e = e || window.event
    //   const target = e.target || e.srcElement
    //   if (target.className === 'adjunction') {
    //      window.alert('添加购物车成功')
    //      return
    //     // window.location.reload()
    //   }
    
   
    //   if (target.className === 'up') {
    //     let btn = input.value - 0
    //     if(btn <= ip ){
    //     input.value++
    //     getInfo()
    //   }
    //       return  window.alert('商品库存不足,请补货后购买! ^_^')
    // }
    //   if (target.className === 'down') {
    //     let btn = input.value - 0
    //     if(btn <= 1 ) return
    //     input.value--
    //     getInfo()
    //   }
    })
  
  